<template>
  <!-- 头部功能按钮 -->
  <div class="top">
    <div class="left">
      <el-icon><Grid /></el-icon>&nbsp;用户管理
    </div>
    <div class="right">
      <input type="text" placeholder="账号" v-model="Name" />
      <el-button class="icon" type="primary" :icon="Search" @click="search"
        >查询</el-button
      >
      <el-button
        class="icon"
        color="rgb(103,194,58)"
        type="primary"
        @click="dialogFormVisible = true"
        >+ 新建</el-button
      >
      <el-button class="icon" type="primary" @click="update">编辑</el-button>
      <el-button
        class="icon"
        color="rgb(245,108,98)"
        type="primary"
        :icon="Delete"
        @click="del"
        >删除</el-button
      >
      <el-button class="icon op" color="lightgreen" type="primary"
        ><span>↑</span> 导入</el-button
      >
      <el-button class="icon op" color="lightgreen" type="primary"
        ><span>↓</span>导出</el-button
      >
    </div>
  </div>
  <!-- 功能按钮弹框增，改 -->
  <el-dialog v-model="dialogFormVisible" width="600px" >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">新建</h4>
      </div>
    </template>
    <el-form :model="tableDataInput" class="dialog">
      <div class="left">
        <el-form-item label="编号">
          <el-input
            v-model="tableDataInput.id"
            autocomplete="off"
            placeholder="编号"
          />
        </el-form-item>

        <el-form-item label="角色">
          <el-select
            v-model="tableDataInput.Role"
            placeholder="Please select a zone"
          >
            <el-option label="测试管理员" value="测试管理员" />
            <el-option label="三级角色测试" value="三级角色测试" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-model="tableDataInput.Sex"
            placeholder="Please select a zone"
          >
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input
            v-model="tableDataInput.CreateTime"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" autocomplete="off"/>
        </el-form-item>
      </div>
      <div class="right">
        <el-form-item label="账号">
          <el-input
            v-model="tableDataInput.Name"
            autocomplete="off"
            placeholder="账号"
          />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="tableDataInput.Realname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否可用">
          <el-select
            v-model="tableDataInput.Yn"
            placeholder="Please select a zone"
          >
            <el-option label="是" value="是" />
            <el-option label="否" value="否" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input
            v-model="tableDataInput.Admin"
            autocomplete="off"
          />
        </el-form-item>
        
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" v-if="isEdit" @click="write">修改 </el-button>
        <el-button type="primary" @click="add" v-else> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 表格 -->
  <el-table
    :data="list"
    style="width: 100%"
    :default-sort="{ prop: 'date', order: 'descending' }"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="30"> </el-table-column>
    <el-table-column prop="Name" label="姓名" width="80"> </el-table-column>
    <el-table-column prop="Sex" label="性别" width="80"></el-table-column>
    <el-table-column label="头像" width="100"
      ><img src="http://120.48.115.252:9990/img/error.7cbea5ed.png" alt="" />
    </el-table-column>
    <el-table-column prop="Role" label="角色" width="120"> </el-table-column>
    <el-table-column prop="Realname" label="真实姓名" width="100">
    </el-table-column>
    <el-table-column prop="CreateTime" label="注册时间" width="180">
    </el-table-column>
    <el-table-column prop="Admin" label="创建人" width="100"> </el-table-column>
    <el-table-column prop="Yn" label="是否可用" width="100"> </el-table-column>
    <el-table-column
      prop="UpdateTime"
      label="修改时间"
      width="180"
    ></el-table-column>
    <el-table-column prop="sex" label="操作" width="100">
      <el-icon><Tools /></el-icon><span>查看</span>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default>
        <!-- <el-button link type="primary" size="small" @click="look"
          >查看</el-button
        > -->
        <el-button link type="primary" size="small" @click="update"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-config-provider :locale="locale">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="PageAll"
      >
      </el-pagination>
    </el-config-provider>
  </div>

  <!-- 列表弹框 -->
</template>
<script setup>
import { Delete, Search, Grid } from "@element-plus/icons-vue";
import { ref, onMounted, getCurrentInstance } from "vue";
import axios from "axios";
// 中文显示
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
// 定义显示哪个弹框
let isEdit = ref(false);
// 功能弹窗
const dialogFormVisible = ref(false);
// 分页组件中文显示
let locale = zhCn;
const {
  appContext: {
    config: {
      globalProperties: { $message },
    },
  },
} = getCurrentInstance();
// 分页
let PageIndex = ref(1);
let PageSize = ref(5);
let PageAll = ref(0);
let Name = ref("");
// 分页方法
let handleSizeChange = (val) => {
  PageSize = val;
};
let handleCurrentChange = (val) => {
  console.log(val);
  PageIndex.value = val;
  PageSearch();
};
// 复选框
let multipleSelection = ref([]);
let handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
// 表格对象
let tableDataInput = ref({
  id: "",
  Name: "",
  Sex: "",
  img: "http://120.48.115.252:9990/img/error.7cbea5ed.png",
  Role: "",
  Realname: "",
  CreateTime: "",
  Admin: "",
  Yn: "",
  UpdateTime: "",
});
let list = ref([]);
// 根据id查询
let load1 = async () => {
  let { data } = await axios.get("https://www.vol.com/UserManage/GetId", {
    params: { id: 1 },
  });
};
// 添加方法
let add = async () => {
  let { data } = await axios.post("https://www.vol.com/UserManage/Add", {
    id: tableDataInput.value.id,
    Name: tableDataInput.value.Name,
    Sex: tableDataInput.value.Sex,
    img: "http://120.48.115.252:9990/img/error.7cbea5ed.png",
    Role: tableDataInput.value.Role,
    Realname: tableDataInput.value.Realname,
    CreateTime: tableDataInput.value.CreateTime,
    Admin: tableDataInput.value.Admin,
    Yn: tableDataInput.value.Yn,
    UpdateTime: tableDataInput.value.UpdateTime,
  });
  if (data) {
    dialogFormVisible.value = false;
    PageSearch();
  }
};
// 删除方法
let del = () => {
  if (multipleSelection.value.length <= 0) return $message("你没有选择删除");
  multipleSelection.value.forEach(async (r) => {
    let { data } = await axios.post("https://www.vol.com/UserManage/Delete", {
      id: r.id,
    });
    if (data) {
      $message({
        message: "删除成功！",
        type: "success",
      });
      PageSearch();
    } else {
      $message({
        message: "删除失败！",
        type: "error",
      });
    }
  });
};
// 分页查询和模糊查询
let PageSearch = async () => {
  let { data } = await axios.get("https://www.vol.com/UserManage/Page", {
    params: {
      PageIndex: PageIndex.value,
      PageSize: PageSize.value,
      Name: Name.value,
    },
  });
  list.value = data.data;
  PageAll.value = data.count;
};
let search = () => {
  PageIndex.value = 1;
  PageSearch();
};
// 编辑方法
let update = async () => {
  if (multipleSelection.value.length != 1)
    return $message("请选择要修改的一条内容");
  dialogFormVisible.value = true;
  isEdit.value = true;
  let { data } = await axios.get("https://www.vol.com/UserManage/GetId", {
    params: {
      id: multipleSelection.value[0].id,
    },
  });
  tableDataInput.value = data;
};
// 确认修改方法
let write = async () => {
  let { data } = await axios.post("https://www.vol.com/UserManage/Edit", {
    id: tableDataInput.value.id,
    Name: tableDataInput.value.Name,
    Sex: tableDataInput.value.Sex,
    img: "http://120.48.115.252:9990/img/error.7cbea5ed.png",
    Role: tableDataInput.value.Role,
    Realname: tableDataInput.value.Realname,
    CreateTime: tableDataInput.value.CreateTime,
    Admin: tableDataInput.value.Admin,
    Yn: tableDataInput.value.Yn,
    UpdateTime: tableDataInput.value.UpdateTime,
  });
  if (data) {
    $message({
      type: "success",
      message: "修改成功",
    });
    PageSearch();
    dialogFormVisible.value = false;
    isEdit.value = false;
    tableDataInput.value = {
      id: "",
      Name: "",
      Sex: "",
      img: "http://120.48.115.252:9990/img/error.7cbea5ed.png",
      Role: "",
      Realname: "",
      CreateTime: "",
      Admin: "",
      Yn: "",
      UpdateTime: "",
    };
  } else {
    $message({
      type: "error",
      message: "修改失败",
    });
  }
};
onMounted(() => {
  load1();
  PageSearch();
});
</script>
<style scoped lang="scss">
.top {
  width: 100%;
  height: 50px;
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    font-weight: bold;
    border-bottom: 2px solid black;
    margin-right: 20px;
    padding: 5px 0;
    flex-shrink: 0;
  }
  .right {
    flex-shrink: 0;
    margin-right: 20px;
  }
}
.table {
  margin: 10px;
}
img {
  width: 50px;
  height: 50px;
}
.my-header {
  padding: 19px;
  width: 110.5%;
  background: linear-gradient(to right, #0cd7bd, #4cc4f3);
  margin: -20px 0 0 -20px;
}
.demo-pagination-block {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: right;
  margin-right: 20px;
}
h4 {
  color: white;
}
input {
  width: 150px;
  height: 30px;
  margin-right: 10px;
}
.dialog {
  display: flex;
  justify-content: space-between;
  float: left;
  .left,.right{
    width: 50%;
    .el-input {
      width: 100px;
    }
  }

}
</style>
